<template>
	<view class="page" :style="themeColor">
		<!---flex布局flex布局开始-->
		<!---flex布局flex布局结束-->
		<view class="flex benben-position-layout flex flex-wrap align-center secondNext_flex_1"
			:style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx'}"
			:class="scrollTop >= 50 ? 'nav_bg' : ''">
			<view class='flex flex-wrap align-center justify-between flex-sub secondNext_fd1_0'>
				<view class='flex flex-wrap align-center justify-center secondNext_fd1_0_c0' @tap.stop="handleJumpDiy"
					data-type="back" data-url="1">
					<text class='fu-iconfont2  secondNext_fd1_0_c0_c0'>&#xE794;</text>
				</view>
				<view class='flex flex-wrap align-stretch justify-center'>
				</view>
				<view class='flex flex-wrap align-center secondNext_fd1_0_c0'>
				</view>
			</view>
		</view>
		<view class="secondNext_flex_0">
			<view class='secondNext_fd0_0'>
				<text class='secondNext_fd0_0_c0'>完善基本信息（2/2）</text>
				<view class="reject_info" v-if="type == 2">
					<text>账号审核驳回原因：</text>
					<text>{{userInfo.reject_info}}</text>
				</view>
			</view>
		</view>
		
		<!---flex布局flex布局开始-->
		<view class="flex flex-direction flex-wrap align-stretch benben-flex-layout secondNext_flex_2">
			<view class='flex flex-wrap align-center secondNext_fd2_0'>
				<text class='secondNext_fd2_0_c0'>请上传身份证照片（选填）</text>
			</view>
			<view class='flex flex-wrap align-center secondNext_fd2_1'>
				<view class="upload position-relative secondNext_fd2_1_c0">
					<text v-if="fd2_1_c0 != ''" @tap="fd2_1_c0 = ''"
						class='fu-iconfont2 position-absolute secondNext_fd2_1_c0_icon'>&#xE8E7;</text>
					<image v-if="!fd2_1_c0" class="secondNext_fd2_1_c0_image" mode="aspectFit"
						@tap="soloChooseImage('fd2_1_c0id','fd2_1_c0',false,false)" :src="STATIC_URL+'14.png'"></image>
					<image @tap.stop="previewImage(fd2_1_c0)" v-else class="secondNext_fd2_1_c0_image" mode="aspectFill" :src="fd2_1_c0"></image>
				</view>
			</view>
			<view class='flex flex-wrap align-center secondNext_fd2_1'>
				<view class="upload position-relative secondNext_fd2_1_c0">
					<text v-if="fd2_2_c0 != ''" @tap="fd2_2_c0 = ''"
						class='fu-iconfont2 position-absolute secondNext_fd2_1_c0_icon'>&#xE8E7;</text>
					<image v-if="!fd2_2_c0" class="secondNext_fd2_1_c0_image" mode="aspectFit"
						@tap="soloChooseImage('fd2_2_c0id','fd2_2_c0',false,false)"
						:src="STATIC_URL+'15.png'"></image>
					<image @tap.stop="previewImage(fd2_2_c0)" v-else class=" secondNext_fd2_1_c0_image" mode="aspectFill" :src="fd2_2_c0"></image>
				</view>
			</view>
			<view class='flex flex-wrap align-center secondNext_fd2_3'>
				<text class='secondNext_fd2_0_c0'>学历证书（选填）</text>
			</view>
			<view class='flex flex-wrap align-center secondNext_fd2_1'>
				<view class="upload position-relative secondNext_fd2_1_c0">
					<text v-if="fd2_4_c0 != ''" @tap="fd2_4_c0 = ''"
						class='fu-iconfont2 position-absolute secondNext_fd2_1_c0_icon'>&#xE8E7;</text>
					<image v-if="!fd2_4_c0" class=" secondNext_fd2_1_c0_image" mode="aspectFit"
						@tap="soloChooseImage('fd2_4_c0id','fd2_4_c0',false,false)"
						:src="STATIC_URL+'16.png'"></image>
					<image v-else class=" secondNext_fd2_1_c0_image" mode="aspectFill"
						@tap.stop="previewImage(fd2_4_c0)"
						:src="fd2_4_c0"></image>
				</view>
			</view>
			<view class='flex flex-wrap align-center secondNext_fd2_3'>
				<text class='secondNext_fd2_0_c0'>资格证件（选填）</text>
				<text class='secondNext_fd2_5_c1'>可上传多个</text>
			</view>
			<view class='flex flex-wrap align-center justify-between' style="width: 100%;">
				<view class='flex flex-wrap align-center'>
					<image class='secondNext_fd2_6_c0_c0' mode="aspectFill" :src='STATIC_URL+"17.png"'></image>
				</view>
				<view class='flex flex-wrap align-center'>
					<image class='secondNext_fd2_6_c0_c0' mode="aspectFill" :src='STATIC_URL+"94.png"'></image>
				</view>
				<view class='flex flex-wrap align-center'>
					<image class='secondNext_fd2_6_c0_c0' mode="aspectFill" :src='STATIC_URL+"95.png"'></image>
				</view>
			</view>
			<!-- <view class='flex flex-wrap align-center secondNext_fd2_1'>
				<view class="upload position-relative secondNext_fd2_1_c0">
					<text v-if="fd2_7_c0 != ''" @tap="fd2_7_c0 = ''"
						class='fu-iconfont2 position-absolute secondNext_fd2_1_c0_icon'>&#xE8E7;</text>
					<image class=" secondNext_fd2_1_c0_image" mode="aspectFit"
						@tap="soloChooseImage('fd2_7_c0id','fd2_7_c0',false,false)"
						:src="fd2_7_c0 ? fd2_7_c0 : STATIC_URL+'16.png'"></image>
				</view>
			</view> -->
			<view class='flex flex-direction flex-wrap align-stretch'>
				<benben-images-upload ref="benbenImagesUploadfd1_3_c1_c0" :img-list.sync="imgs" :img-ids.sync="thumb"
					:is-show-tips='true' :maxlength="3">
					<template #content="{ num, maxlength, isShow, imgList }">
						<view class="flex flex-wrap align-start flex feedBack1666772448_fd1_3_c1_c0">

							<view v-for="(image, index) in imgList" :key="index"
								class='flex position-relative feedBack1666772448_fd1_3_c1_c00'>
								<text class='fu-iconfont2 position-absolute feedBack1666772448_fd1_3_c1_c000'
									@tap.stop="$refs.benbenImagesUploadfd1_3_c1_c0.delImage(index)">&#xE8E7;</text>
								<image class='feedBack1666772448_fd1_3_c1_c001'
									@tap.stop="$refs.benbenImagesUploadfd1_3_c1_c0.previewImage(index)"
									mode="aspectFill" :src='image'></image>
							</view>

							<image class='feedBack1666772448_fd1_3_c1_c01'
								@tap.stop="$refs.benbenImagesUploadfd1_3_c1_c0.manyChooseImage()" v-if="isShow"
								mode="aspectFit" :src='STATIC_URL+"16.png"'></image>
						</view>
					</template>
				</benben-images-upload>
			</view>
		</view>

		<!---flex布局flex布局结束-->
		<view class="flex flex-direction flex-wrap align-center benben-position-layout flex secondNext_flex_3">
			<button class='secondNext_fd3_0' @tap.stop="submitRegister">下一步</button>

		</view>
		<view :style="{height: '130rpx'}"></view>


	</view>
</template>
<script>
	import UploadImage from '@/common/utils/upload-image.js'
	import benbenImagesUpload from '@/components/benben-images-upload/benben-images-upload.vue'
	import permision from "@/common/utils/permission.js"    // 权限提醒
	export default {
		components: {
			benbenImagesUpload
		},


		data() {
			return {
				"fd2_1_c0": "",
				"fd2_1_c0id": "",
				"fd2_2_c0": "",
				"fd2_2_c0id": "",
				"fd2_4_c0": "",
				"fd2_4_c0id": "",
				"fd2_7_c0": "",
				"fd2_7_c0id": "",
				"scrollTop": 0,
				"thumb": "",
				"imgs": [],
				"registerInfo": {},
				"type": 1,  // 1正常注册  2审核拒绝
			};
		},
		computed: {
			themeColor() {
				return this.$store.getters.themeColor
			},
			userInfo() {
				return this.$store.state.userInfo
			}
		},
		watch: {},
		onLoad(options) {
			let {type} = options
			if (type !== undefined) this.type = type;
			if (this.type == 2) {
				this.fd2_1_c0 = this.userInfo.idcard_portrait;
				this.fd2_2_c0 = this.userInfo.idcard_emblem;
				this.fd2_4_c0 = this.userInfo.diploma;
				if (!this.userInfo.nvq) {
					this.imgs = [];
				} else {
					this.imgs = this.userInfo.nvq;
				}
				
			}
			this.registerInfo = uni.getStorageSync('registerInfo');
			// console.log(this.registerInfo);
			// switch (uni.getSystemInfoSync().platform) {
			// 	case 'android':
			// 		permision.requestAndroidPermission("android.permission.READ_PHONE_STATE")
			// 		permision.requestAndroidPermission("android.permission.WRITE_EXTERNAL_STORAGE")
			// 		break;
			// 	case 'ios':
					
			// 		break;
			// }
		},
		onUnload() {

		},
		onReady() {

		},
		onShow() {

		},
		onHide() {

		},
		onResize() {

		},
		onPullDownRefresh() {

		},
		onReachBottom(e) {

		},
		onPageScroll(e) {

		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		methods: {
			// 提交注册
			submitRegister() {
				if (this.type == 1) {
					this.$api.post(global.apiUrls.post64ccc3e3e0b92, {
						// mobile: this.registerInfo.mobile,
						// code: this.registerInfo.code,
						// password: this.registerInfo.password,
						type: 1,
						unitsmanager_id: this.registerInfo.unitsmanager_id,
						real_name: this.registerInfo.real_name,
						idcard_portrait: this.fd2_1_c0,
						idcard_emblem: this.fd2_2_c0,
						diploma: this.fd2_4_c0,
						nvq: this.imgs.length > 0 ? this.imgs.join(',') : ''
					}).then(res => {
						console.log(res);
						if (res.data.code == 1) {
							this.$message.info('账号正在审核，请耐心等候');
							setTimeout(() => {
								uni.reLaunch({
									url: '/pages/tabBar/login/login'
								})
							}, 800)
						} else {
							this.$message.info(res.data.msg);
						}
					})
				} else {
					this.$api.post(global.apiUrls.post64c218953bc4f, {
						unitsmanager_id: this.registerInfo.unitsmanager_id,
						real_name: this.registerInfo.real_name,
						idcard_portrait: this.fd2_1_c0,
						idcard_emblem: this.fd2_2_c0,
						diploma: this.fd2_4_c0,
						nvq: this.imgs.length > 0 ? this.imgs.join(',') : ''
					}).then(res => {
						// console.log(res);
						if (res.data.code == 1) {
							this.$message.info('账号正在审核，请耐心等候');
							setTimeout(() => {
								uni.reLaunch({
									url: '/pages/tabBar/login/login'
								})
							}, 800)
						} else {
							this.$message.info(res.data.msg);
						}
					})
				}
				
			},
			
			//上传单图、多图方法
			soloChooseImage(id, path, obj, obj1, fnName = false) {
				if (uni.getStorageSync('is_camera') == 0) {
					let self = this
					uni.showModal({
						title: '提示',
						content: '访问您的相机或相册权限，使用拍照或选择照片功能，用于上传头像或上传图片，是否允许？',
						success: function(res) {
							if (res.confirm) {
								console.log('用户点击确定');
								uni.setStorageSync('is_camera', 1);
								if (!obj) obj = this
								if (!obj1) obj1 = this
								if (self.uploading) {
									return
								}
								// 从相册中选择图片
								uni.chooseImage({
									count: 1, // 默认3
									sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
									success: function(res) {
										self.uploading = true
										// 开始上传
										new UploadImage(res.tempFiles, {
											complete: function(res) {
												// console.log('res------------------------------------------',res);
												self.uploading = false
												if (id) self.$set(obj, id, res[0].id)
												if (path) self.$set(obj1, path, res[0].path)
												if (fnName) self[fnName]()
											},
										})
									},
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						},
						fail: function(err) {
							console.log(err);
						}
					})
				} else {
					let self = this
					if (!obj) obj = this
					if (!obj1) obj1 = this
					if (self.uploading) {
						return
					}
					// 从相册中选择图片
					uni.chooseImage({
						count: 1, // 默认3
						sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
						success: function(res) {
							self.uploading = true
							// 开始上传
							new UploadImage(res.tempFiles, {
								complete: function(res) {
									// console.log('res------------------------------------------',res);
									self.uploading = false
									if (id) self.$set(obj, id, res[0].id)
									if (path) self.$set(obj1, path, res[0].path)
									if (fnName) self[fnName]()
								},
							})
						},
					})
				}
			},
			previewImage(url) {
				let arr = [];
				arr.push(url);
				uni.previewImage({
					current: 0, // 当前显示图片的索引值
					urls: arr, // 需要预览的图片列表，photoList要求必须是数组
				})
			},

		}
	};
</script>
<style lang="scss" scoped>
	.reject_info {
		padding: 20rpx 0;
		color: #ff0022;
	}
	.feedBack1666772448_fd1_3_c1_c02 {
		font-size: 24rpx;
		color: rgba(191, 191, 191, 1);
		font-weight: 400;
		width: 100%;
	}

	.feedBack1666772448_fd1_3_c1_c01 {
		width: 670rpx;
		height: 432rpx;
		margin: 8rpx 0rpx 8rpx 0rpx;
		border-radius: 8rpx;
	}

	.feedBack1666772448_fd1_3_c1_c001 {
		width: 670rpx;
		height: 432rpx;
		border-radius: 8rpx;
		margin-bottom: 16rpx;
	}

	.feedBack1666772448_fd1_3_c1_c000 {
		top: 0rpx;
		right: 0rpx;
		z-index: 10;
		color: #ff5536;
	}

	.feedBack1666772448_fd1_3_c1_c00 {
		// margin: 0rpx 24rpx 24rpx 0rpx;
	}

	.feedBack1666772448_fd1_3_c1_c0 {
		padding: 24rpx 0rpx 24rpx 0rpx;
	}

	.page {
		width: 100vw;
		overflow-x: hidden;
		min-height: calc(100vh - var(--window-bottom));
		background: var(--benbenbgColor1);
		background-size: 100% auto !important;
	}

	.secondNext_flex_0 {
		background: url(/static/images/13.png) no-repeat, transparent;
		height: 346rpx;
		background-size: 100% auto !important;
		padding: 88rpx 04rpx 0rpx 0rpx;
		display: flex;
		align-items: flex-end;
	}

	.secondNext_fd0_0_c0 {
		color: #000000;
		font-size: 40rpx;
		font-weight: 500;
		line-height: 56rpx;
	}

	.secondNext_fd0_0 {
		// margin: 150rpx 0rpx 0rpx 0rpx;
		padding: 0rpx 32rpx 48rpx 32rpx;
	}

	.secondNext_flex_1 {
		width: 750rpx;
		height: 88rpx;
		overflow: hidden;
		z-index: 100;
		top: 0rpx;
	}

	.nav_bg {
		background: #fff;
	}

	.secondNext_fd1_0_c0_c0 {
		font-size: 36rpx;
		color: #333;
	}

	.secondNext_fd1_0_c0 {
		width: 50rpx;
		height: 50rpx;
	}

	.secondNext_fd1_0 {
		padding: 0rpx 32rpx 0rpx 32rpx;
	}

	.secondNext_flex_2 {
		padding: 0rpx 32rpx 0rpx 32rpx;
	}

	.secondNext_fd2_6_c0_c0 {
		width: 206rpx;
		height: 140rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}

	.secondNext_fd2_5_c1 {
		color: #ACB3B9;
		font-size: 28rpx;
		font-weight: 700;
		line-height: 45rpx;
	}

	.secondNext_fd2_3 {
		margin: 32rpx 0rpx 16rpx 0rpx;
	}

	.secondNext_fd2_1_c0_image {
		// width: 100%;
		// height: 100%;
		border-radius: 8rpx;
		width: 670rpx;
		height: 432rpx;
	}

	.secondNext_fd2_1_c0_icon {
		top: 0rpx;
		right: 0rpx;
		z-index: 10;
		color: #ff5536;
	}

	.secondNext_fd2_1_c0 {
		width: 670rpx;
		height: 432rpx;
	}

	.secondNext_fd2_1 {
		margin: 16rpx 0rpx 16rpx 0rpx;
	}

	.secondNext_fd2_0_c0 {
		color: #000000;
		font-size: 32rpx;
		font-weight: 700;
		line-height: 45rpx;
	}

	.secondNext_fd2_0 {
		margin: 0rpx 0rpx 16rpx 0rpx;
	}

	.secondNext_flex_3 {
		width: 750rpx;
		height: 88rpx;
		overflow: hidden;
		z-index: 10;
		bottom: calc(48rpx + var(--window-bottom));
	}

	.secondNext_fd3_0 {
		background: rgba(205, 150, 45, 1);
		border-radius: 64rpx 64rpx 64rpx 64rpx;
		font-size: 32rpx;
		color: #fff;
		width: 686rpx;
		height: 88rpx;
		line-height: 88rpx;
	}
</style>